import { IThemeColor } from '../../../../../type/index';

export const initScoreCounter = (echarts: any, dom: HTMLElement, dataYList: number[], dataXList: string[], themeColor: IThemeColor) => {
  const charts = echarts.init(dom);
  charts.setOption({
    // backgroundColor: "#1A1835",
    title: {
      text: '各分数段人数趋势',
      textStyle: {
        color: themeColor.font,
        fontSize: 16,
        fontWeight: 'normal',
      },
      padding: [16, 0, 0, 16],
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(8,36,68,.7)',
      textStyle: {
        color: '#fff',
      },
      axisPointer: {
        type: 'cross',
        crossStyle: {
          width: 1.4,
        },
        lineStyle: {
          width: 1.4,
        },
      },
    },
    grid: {
      left: '8%',
      right: '8%',
      top: '20%',
      bottom: '12%',
    },
    legend: {
      x: '46%',
      top: '11%',
      textStyle: {
        color: themeColor.font,
      },
      data: ['数量统计', '发展趋势'],
    },
    xAxis: [
      {
        name: '(分)',
        type: 'category',
        axisTick: {
          show: true,
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: themeColor.border,
          },
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: themeColor.font,
          fontSize: 14,
          margin: 20,
        },
        data: dataXList,
      },
    ],

    yAxis: [
      {
        name: '(人)',
        nameTextStyle: {
          color: themeColor.font,
        },
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: themeColor.font,
          },
        },
        axisLabel: {
          color: themeColor.font,
          fontSize: 14,
        },
      },
    ],
    series: [
      {
        name: '数量统计',
        type: 'bar',
        barWidth: 35, // 柱子宽度
        label: {
          show: true,
          // color: '#A7D6F4',
          color: themeColor.font,
          fontSize: 14,
          distance: 5, // 距离
          position: 'top',
        },
        itemStyle: {
          borderRadius: [2, 2, 2, 2], // 圆角（左上、右上、右下、左下）
          color: '#6f7de3',
        },
        data: dataYList,
      },
      {
        name: '发展趋势',
        type: 'line',
        smooth: true,
        symbolSize: 10,
        symbol: 'circle',
        itemStyle: {
          color: '#c257F6',
        },
        data: dataYList,
      },
    ],
  });
};
